import React, {Component} from "react"
import {View,Text,StyleSheet} from "react-native";
import {connect} from "react-redux";
import Iconfont from "react-native-vector-icons/Ionicons"
import {SCREEN_WIDTH} from "../../static/js/tools";
export interface HeaderProps{
    fontSize?:number
    icon?:Boolean
    color?:string
    title:string
    children?:any
}
export const HEADER_HEIGHT = 50;
/**
 * @Author Training
 * @Desc 顶部标题组件
 */

class Header extends Component<HeaderProps>{
    static defaultProps:HeaderProps={
        icon:false,
        title:"title"
    };
    constructor(props: HeaderProps | Readonly<HeaderProps>){
        super(props);
        // props = {...this.props,...props};
    }

    render():any{
        let {fontSize,icon,color,title} = this.props;
        return (
            <View style={[styles.header]}>
                <View style={[styles.iconStyle,{display:icon?"flex":"none"}]}>
                    <Iconfont
                        name="chevron-back"
                        size={(fontSize || 18)+6}
                        color={color||"#333"}
                    />
                </View>
                <Text style={[styles.titleText,{fontSize:fontSize || 18,color:color||"#333"}]}>{title}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    iconStyle:{
        height:HEADER_HEIGHT,
        padding:10,
        justifyContent:"center"
    },
    header:{
        backgroundColor:"white",
        flexDirection:"row",
        height:HEADER_HEIGHT,
        borderBottomWidth:1,
        borderBottomColor:"#eee",
        alignItems:"center",
        position:"relative"
    },
    titleText:{
        textAlign:"center",
        width:SCREEN_WIDTH,
        position:"absolute",
        left:0,
        top:0,
        lineHeight:HEADER_HEIGHT
    }
})
const mapStateToProps = (state:any) => ({

});
const mapDispatchToProps = (dispatch:any) => ({

});
export default connect(mapStateToProps,mapDispatchToProps)(Header)
